<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Interface testing tool</title>
    <link rel="icon" href="/static/images/xty.ico" type="image/x-icon">
    <link rel="shortcut icon" href="/static/images/xty.ico" type="image/x-icon">
    <link  href="/static/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <script src="/static/scripts/jquery-3.2.1.min.js"></script>
    <script src="/static/bootstrap/js/bootstrap.min.js"></script>
     <style type="text/css">
        .url{
            width:338px;
            height:50px;
        }
        .com_input{
            width:557px;
            height:50px;
        }
        .post_mothod, .send{
            width:70px;
            height:50px;
            
        }
        .left, .right {
            padding: 10px;
            display: table-cell;
            border: 1px solid #aaaaaa;
        }        
    </style>
  </head>
  <body>
    
    <div>
      <ul class="nav nav-tabs nav-justified">
        <li class="active"><a href="#">Interface Testing Tool</a></li>
        <li><a href="/url_decoding/"><sapan class="active2">url_decoding</sapan></a></li>
        <li class="dropdown">
          <a class="dropdown-toggle" data-toggle="dropdown" href="#">
            字符串处理<span class="caret"></span>
          </a>
          <ul class="dropdown-menu">
            <li><a href="#">xml_json</a></li>
            <li><a href="#">json_xml</a></li>
            <li><a href="#">MD5</a></li>
            <li class="divider"></li>
            <li><a href="#">分离的链接</a></li>
          </ul>
        </li>
        <li><a href="#">safeTool</a></li>
      </ul>
    </div>
    <div class="left"  style="height:100%;height: 87vh;min-height:520px;padding:10px 10px 10px 30px;border:0;border-right:solid 1px #E5EBEE;border-bottom:solid 1px #eee;border-radius:0;resize: none; outline:none;font-size:10px;">
  	  <form id="inter_form" class="" action="/interface/" method="post">
        <!-- onchange="changmethod();" -->
        <select id="test_moth" class="post_mothod" name="postmethod"  >
          <option value="POST_METHOD" >POST</option>
          <option value="GET_METHOD" >GET </option>  
          <option value="OPTIONS_METHOD" >OPTIONS</option> 
        </select>

        <select id="posttypeId" class="post_mothod" name="posttype" onchange="changtype();" >
          <option value="qm_inter">qm_inter</option> 
          <option value="com_inter">com_inter</option>  
        </select>

  		  <input type="text" class="url"  name="url"  placeholder="在此输入请求地址" />
        <!-- <input type="submit" class="send"  value="send" onclick="set_sed()"  name="submit" /> -->
        <input type="button" class="send"  value="send" onclick="rec_api()"  name="submit" />

        <div id="qm_inter_met">
            <input type="text" class="com_input"  name="inter_mothd" placeholder="请输入订单的类型，如输入：发货单创建" />
        </div>
    
        <textarea class="cotent_input" id="content_id" name="content" cols="89" rows="30" placeholder="在此输入请求报文&#13;&#10;输入: {timestr} = 2018-2-9 10:10:10 &#13;&#10;输入: {time_rod} = 随机字符串&#13;&#10;输入{timestr},{time_rod}看看" ></textarea> 
        {% csrf_token %}
      </form>
    </div>
      <div id="result_content" class="right" style="width:100%;height: 87vh;min-height:520px;border:solid 1px #f6f6f6;border-radius:0;resize: none;overflow-y:scroll; outline:none;position:relative;font-size:12px;padding-top:40px;">
        <!-- 下面这里一定要用p元素 --> 
        <p></p>
      </div>
  </body>

  <script type="text/javascript">

    function changmethod(){
      var test = document.getElementById("test_moth").value;
      if(test==="GET_METHOD"){
        document.getElementById("content_id").disabled=true;
      }else if(test==="POST_METHOD"){
        document.getElementById("content_id").disabled=false;
      }
    };

    function changtype(){
      var chang_val = document.getElementById("posttypeId").value;
      if(chang_val==="com_inter"){
        $("#qm_inter_met").hide();
      }else if(chang_val==="qm_inter"){
        $("#qm_inter_met").show();
      }
    };

    function rec_api(){
                $.ajax({
                    type: "POST",
                    dataType: "JSON",
                    url: "/interface/",
                    data: $('#inter_form').serialize(),
                    success: function(result){
                        console.log(result);
                        $("#result_content p").html(JSON.stringify(result));//写到P标签里面 JSON.stringify 转为字符串 
                        // $("#result_content p").html(JSON.parse(result));

                    // error : function(){
                    //     alert("异常！");
                    }
                })
            }

  </script>
</html>
